<template>
	<hx-navbar :title="state.pageDesign?.pageName || '页面不存在'"></hx-navbar>
	<div v-if="state.pageDesign">
		<view v-for="(item, index) in state.pageDesign.pageContent.componentsList" :key="index">
			<diy-notice v-if="item.name == 'notice'" :showData="item.data"></diy-notice>
			<diy-goods v-if="item.name == 'goods'" :showData="item.data"></diy-goods>
			<diy-tabnav v-if="item.name == 'tabNav'" :showData="item.data"></diy-tabnav>
			<diy-image v-if="item.name == 'image'" :showData="item.data"></diy-image>
			<diy-title-text v-if="item.name == 'titleText'" :showData="item.data"></diy-title-text>
		</view>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { getById } from '@/api/promotion/pageDesign';
import { onLoad } from '@dcloudio/uni-app';
import DiyNotice from '@/components/diy-page/diy-notice/index.vue';
import DiyGoods from '@/components/diy-page/diy-goods/index.vue';
import DiyTabnav from '@/components/diy-page/diy-tabnav/index.vue';
import DiyImage from '@/components/diy-page/diy-image/index.vue';
import DiyTitleText from '@/components/diy-page/diy-titletext/index.vue';

const state = reactive<{ pageDesign: any }>({
	pageDesign: {
		pageContent: {
			componentsList: [],
		},
	},
});
onLoad((options) => {
	getPageDesign(options?.id);
});
const getPageDesign = (id: string) => {
	getById(id).then((response) => {
		state.pageDesign = response.data;
	});
};
</script>

<style lang="scss"></style>
